<template>
    <div class="jjxbox">
        <div class="jjxbox_top">
            <img src="../assets/imgOrfont/tubiao.png" alt="" style="width: 50px;height: 58px; margin-right: 27px;">
            <div class="jjxbox_top_title">西安机车检修段</div>
        </div>
        <div class="jjxbox_center">
            <div class="jjxbox_center_left">
                <img src="../assets/imgOrfont/chetou.png" alt="" style="width: 100%;height: 100%;">
            </div>
            <div class="jjxbox_center_right">
                <div class="login_box">
                    <div class="right_icon">
                        <img src="../assets/imgOrfont/denglutu.png" alt="" style="width: 100%;height: 100%;">
                    </div>
                    <div class="right_action">
                        <div class="right_action_title">
                            材料工具一体化管理信息系统
                        </div>
                        <el-form :model="dataForm" :rules="dataRule" size="small" v-loading="loading" ref="dataForm"
                            @keyup.enter.native="dataFormSubmitHandle()">
                            <el-form-item prop="username" style="margin: 30px 0 40px;">
                                <div class="right_action_items">
                                    <img src="../assets/imgOrfont/ren.png" class="right_action_icon">
                                    <input type="text" v-model="dataForm.username" :placeholder="$t('login.username')">
                                </div>
                            </el-form-item>
                            <el-form-item prop="password">
                                <div class="right_action_items">
                                    <img src="../assets/imgOrfont/suo.png" alt="" class="right_action_icon"
                                        style="top: 11px;height: 18px;width: 14px;">
                                    <input v-model="dataForm.password" type="password" :placeholder="$t('login.password')">
                                </div>
                            </el-form-item>
                            <el-form-item style="text-align: left">
                                <el-checkbox v-model="isRememberAccount">{{
                                    $t('clientPortalLogin.rememberAccount')
                                }}</el-checkbox>
                            </el-form-item>
                            <el-form-item>
                                <div class="right_action_items loginBtn" style="margin-top: 41px;">
                                    <el-button v-loading="loading" @click="dataFormSubmitHandle()" type="primary"
                                        class="but">{{ $t('login.title') }}</el-button>
                                </div>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
        <div class="jjxbox_btm">
            版权所有：西安永固智能装备有限公司 技术支持：029-82099586
        </div>
    </div>
</template>
  
<script>
import Cookies from 'js-cookie'
import debounce from 'lodash/debounce'
import { getUUID } from '@/utils'
import { getDictInfoCommon } from '@/utils/common-request'
import { setToken } from '@/components/storybook/utilties/auth'

export default {
    data() {
        return {
            dataForm: {
                username: '',
                password: '',
                uuid: ''
            },
            loading: false,
            isRememberAccount: false,
            beforeLoginPage: null,
            beforeLoginParams: null
        }
    },
    computed: {
        dataRule() {
            return {
                username: [
                    {
                        required: true,
                        message: this.$t('validate.required'),
                        trigger: 'blur',
                        pattern: '[^ \x22]+'
                    },
                    {
                        required: true,
                        message: this.$t('validate.required'),
                        trigger: 'blur'
                    }
                ],
                password: [
                    {
                        required: true,
                        message: this.$t('validate.required'),
                        trigger: 'blur'
                    }
                ]
            }
        },
        img0() {
            return this.$ossLink + '/app/gif/login_image.gif'
        }
    },
    created() {
        Promise.all([this.getloginInfo()]).then(() => {
            this.getCaptcha()
            this.accountFill()
            if (
                this.$store.state.app.isNavToLogin &&
                this.$store.state.app.beforeLoginPage &&
                this.$store.state.app.beforeLoginPage !== '/'
            ) {
                this.beforeLoginPage = this.$store.state.app.beforeLoginPage
                this.beforeLoginParams = this.$store.state.app.beforeLoginParams
            }
        })
    },
    methods: {
        getloginInfo() {
            this.loading = true
            this.$interface.other.getLoginConfigInfo({}).then(({ data: res }) => {
                let tempHost = window.location.hostname
                if (tempHost && tempHost !== 'localhost' && res.data.length > 0) {
                    this.$store.state.siteWebConfig = res.data.filter(e => e.origin === tempHost)[0]
                }
            }).finally(() => {
                this.loading = false
            })
        },
        getCaptcha() {
            this.dataForm.uuid = getUUID()
        },
        dataFormSubmitHandle: debounce(
            function () {
                this.$refs['dataForm'].validate(valid => {
                    if (!valid) {
                        return
                    }
                    this.dataForm.username = this.dataForm.username.trim()
                    this.loading = true
                    this.rememberAccount()
                    this.$interface.login
                        .webLoginApi(this.dataForm)
                        .then(({ data: res }) => {
                            if (res.code !== 0) {
                                this.loading = false
                                this.getCaptcha()
                                this.clearnLocal()
                                return this.$message.error(res.msg)
                            }
                            this.handleSignInWithButtonSuccess(res.data)

                            this.loginSuccess(res.data)
                            getDictInfoCommon()
                        })
                        .catch(error => {
                            console.log(error, 'error')
                            this.clearnLocal()
                            this.loading = false
                        })
                })
            },
            1000,
            { leading: true, trailing: false }
        ),
        async handleSignInWithButtonSuccess(data) {
            this.setCookies(data)
            this.setTabs()

            this.$store
                .dispatch('generateUser')
                .catch(error => console.error(error, 'get user info error'))

            this.authRoutingJump()
        },
        setCookies(data) {
            const { token, tenantCode, tenantName } = data || {}
            setToken(token, { sameSite: 'None', secure: true })
            Cookies.set('tenant_code', tenantCode, { sameSite: 'None', secure: true })
            window.sessionStorage.setItem('isMySelfCode', tenantCode)
            window.sessionStorage.setItem('isMySelfName', tenantName)
        },

        async setTabs() {
            this.$store.state.contentTabs = window.SITE_CONFIG[
                'routerWithForgetToken'
            ] || [
                    {
                        ...window.SITE_CONFIG['contentTabDefault'],
                        name: 'home',
                        title: 'home'
                    }
                ]
        },
        async authRoutingJump() {
            let query = window.userFormQuery
            if (query && has(query, 'formCode')) {
                return this.$router.push(
                    {
                        path: '/userForm',
                        query: query
                    },
                    this.completeRoutingJump
                )
            }

            if (this.redirect) {
                return this.$router.push(this.redirect, this.completeRoutingJump)
            }

            if (
                window.sessionStorage.getItem('isLoginRouter') &&
                window.sessionStorage.getItem('isLoginRouterPath')
            ) {
                return this.$router.push(
                    { path: window.sessionStorage.getItem('isLoginRouterPath') },
                    this.completeRoutingJump
                )
            }

            if (
                this.$store.state.app.beforeLoginPage &&
                this.$store.state.app.isNavToLogin
            ) {
                return this.$router.push(
                    {
                        path:
                            this.$store.state.app.beforeLoginPage +
                            this.$store.state.app.beforeLoginParams
                    },
                    this.completeRoutingJump
                )
            }

            return this.$router.push(
                {
                    path: '/'
                },
                this.completeRoutingJump
            )
        },

        completeRoutingJump() {
            this.$store.state.app.isNavToLogin = false
            this.$store.state.app.beforeLoginPage = null
            this.$store.state.app.beforeLoginParams = null
            sessionStorage.removeItem('isLoginRouterPath')
            sessionStorage.removeItem('isLoginRouter')
        },
        loginSuccess(data) {
            this.$interface.login
                .loginUserInfoApi()
                .then(res => {
                    this.loading = false
                    if (res.data.code !== 0) {
                        this.$store.commit('SET_API_LOAD_STATUS', false)
                        return this.$message.error(res.data.msg)
                    }
                })
                .catch(() => {
                    this.loading = false
                    this.$store.commit('SET_API_LOAD_STATUS', false)
                })
        },
        setCookies(data) {
            window.location.protocol === 'https:' ? Cookies.set('token', data.token, { sameSite: 'None', secure: true }) : Cookies.set('token', data.token)
            window.location.protocol === 'https:' ? Cookies.set('tenant_code', data.tenantCode, { sameSite: 'None', secure: true }) : Cookies.set('tenant_code', data.tenantCode)
            sessionStorage.setItem('isMySelfCode', data.tenantCode)
            sessionStorage.setItem('isMySelfName', data.tenantName)
        },
        goRegist() {
            this.$router.replace({ path: '/registAsAccount' })
        },
        toOtherPage(e) {
            const support = 'https://wiki.mspbots.ai/x/JogF'
            const contacts = 'https://mspbots.ai'
            const termsOfUse = 'https://mspbots.ai/termsofuse/'
            const compliance = 'https://mspbots.ai/privacy/'
            switch (e) {
                case 'termsOfUse':
                    window.open(termsOfUse, '_blank')
                    break
                case 'compliance':
                    window.open(compliance, '_blank')
                    break
                case 'support':
                    window.open(support, '_blank')
                    break
                case 'contacts':
                    window.open(contacts, '_blank')
                    break
                default:
                    break
            }
        },
        rememberAccount() {
            if (this.isRememberAccount) {
                localStorage.setItem('portalaccounta', this.dataForm.username)
                localStorage.setItem('portalaccountb', this.dataForm.password)
                localStorage.setItem('portalaccountc', this.isRememberAccount)
            } else {
                localStorage.removeItem('portalaccounta')
                localStorage.removeItem('portalaccountb')
                localStorage.removeItem('portalaccountc')
            }
        },
        accountFill() {
            if (
                localStorage.getItem('portalaccountc') &&
                localStorage.getItem('portalaccounta') &&
                localStorage.getItem('portalaccountb')
            ) {
                this.$set(
                    this.dataForm,
                    'username',
                    localStorage.getItem('portalaccounta')
                )
                this.$set(
                    this.dataForm,
                    'password',
                    localStorage.getItem('portalaccountb')
                )
                this.$nextTick(() => {
                    this.dataFormSubmitHandle()
                })
            }
        },
        clearnLocal() {
            if (localStorage.getItem('portalaccounta'))
                localStorage.removeItem('portalaccounta')
            if (localStorage.getItem('portalaccountb'))
                localStorage.removeItem('portalaccountb')
            if (localStorage.getItem('portalaccountc'))
                localStorage.removeItem('portalaccountc')
        }
    }
}
</script>
<style scoped>
.jjxbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    background-image: url('../assets/imgOrfont/jjbgc.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.jjxbox_top {
    display: flex;
    align-items: center;
    margin-top: 80px;
}

@font-face {
    font-family: electronicFont;
    src: url(../assets/imgOrfont/guangbiao.ttf)
}

.jjxbox_top_title {
    font-size: 48px;
    font-family: electronicFont;
    font-weight: 400;
    color: #D82727;
    line-height: 46px;
}

.jjxbox_btm {
    font-size: 18px;
    font-family: SimSun;
    font-weight: 400;
    color: #FFFFFF;
    margin-bottom: 45px;
}

.jjxbox_center {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 644px;
    height: 60vh;
}

.jjxbox_center_left {
    width: 48%;
    height: 100%;
    margin-right: 50px;
}

.jjxbox_center_right {
    width: 55%;
    margin-top: 12px;
}

.login_box {
    position: relative;
    display: flex;
    align-items: center;
    width: 45vw;
    height: 52vh;
    border: 1px solid #FFFFFF;
    box-shadow: 0px 5px 49px 0px rgba(74, 113, 240, 0.23);
    border-radius: 14px;
    background-image: url(http://localhost:8080/img/mengceng.2398bd83.png);
    background-position: -19px -5px;
    background-repeat: no-repeat;
    background-size: 110% 107%;
}

.denglututips {
    position: absolute;
    left: 121px;
    top: 53px;
    font-size: 1.15vw;
    font-family: electronicFont;
    font-weight: 700;
    color: #3B63D9;
    line-height: 32px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0);
}

.right_icon {
    width: 18vw;
    height: 16vw;
    margin-left: 34px;
    position: relative;
}

.right_action {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 37px;
}

.right_action_title {
    /* font-size: 30px; */
    font-size: 1.57vw;
    font-family: electronicFont;
    font-weight: 400;
    color: #242424;
    line-height: 69px
}

.right_action_items {
    position: relative;
    display: flex;
    align-items: center;
    /* width: 360px; */
    width: 19vw;
    height: 40px;
    background: #FFFFFF;
    border: 1px solid #81A4FF;
    border-radius: 4px;
    overflow: hidden;
}

.right_action_items input {
    width: 100%;
    height: 100%;
    padding-left: 35px;
    box-sizing: border-box;
    border: none;
    border-radius: 4px;
    outline: #326cff;
}

.forgetpwd {
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #2F66F7;
    line-height: 24px;
    height: 20px;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

.right_action_icon {
    position: absolute;
    left: 11px;
    top: 13px;
    width: 15px;
    height: 22px;
}

.loginBtn {
    border: none;
    background-color: rgba(0, 0, 0, 0);
    box-shadow: 0px 9px 25px 0px rgba(55, 100, 221, 0.63);
    border-radius: 20px;

}

.but {
    width: 19vw;
    height: 40px;
    background: #2F66F7;
    border-radius: 20px;
    overflow: hidden;
}
</style>
  